<!--
 * @Author: your name
 * @Date: 2020-12-31 14:59:41
 * @LastEditTime: 2020-12-31 15:11:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\v-other.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="../index.html" class="retu">BACK</a>
        <h1>v-pre指令</h1>
        <span>在模板跳过vue的编译,直接输出原始值,就是在标签中加入v-pre就不会输出vue中的data值了</span>
        <div v-pre>{{ message }}</div>
        <span>这个时候我们不会输出message的值,而是直接在网页中显示{{ message }}</span>
        <h1>v-cloak指令</h1>
        <span>在vue渲染完指定的整个DOM后才进行显示,她必须和class的样式一起使用</span>
        <div v-clock>{{ message }}</div>
        <h1>v-once指令</h1>
        <span>在第一次DOM时进行渲染,渲染后视图为静态内容,跳出以后的渲染过程</span>
        <div v-once>第一次绑定的值:{{ message }}</div>
        <div><input type="text" v-model="message"></div>
    </div>
    <script>
        let app = new Vue({
            el : '#app',
            data:{
                message : 'hello world',
            }
        });
    </script>
</body>
</html>